<template>
  <div class="content">
    <!-- 头部组件 -->
    <megaBox></megaBox>

    <!-- 内容部分 -->
    <div class="body">

      <!-- 风速示意图 -->
      <div>
        <dv-border-box-6 style="padding: 10px;width: 565px;">
          <!-- <h2 style="text-align: center;">风速示意图</h2> -->
          <Echart
            :options="options1"
            height="405px"
            width="500px"
            style="margin: auto"
          />
        </dv-border-box-6>
      </div>

      <!-- 降水分布图监测 -->
      <div>
        <dv-border-box-6 style="padding: 20px 40px;height: 415px;">
          <!-- <h2>降水分布图</h2> -->
          <Echart :options="options2" height="380px" width="480px" />
        </dv-border-box-6>
      </div>

    </div>
  </div>
</template>

<script>
import Echart from "@/common/echart/index.vue";
import megaBox from "./megaBox.vue"
export default {
  components: { Echart,megaBox },
  data() {
    return {
      // 风速图配置
      options1: {
        title: {
          text: "风速示意图",
          left: "center",
          top: 20,
          textStyle: {
          color: "#fff",
          fontSize: 24,
          }
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          data: ['A', 'B', 'C', 'D', 'E','A', 'B', 'C', 'D', 'B', 'C', 'D']
        },
        yAxis: {},
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        series: [
          {
            data: [10, 22, 28, 23, 19, 22, 28, 23, 19, 28, 23, 19],
            type: 'line',
            stack: 'Total',
            smooth: true,
            areaStyle: {}
          },
          
        ]
      },
      options2: {
        title: {
          text: "降水量示意图",
          left: "center",
          top: 20,
          textStyle: {
          color: "#fff",
          fontSize: 24,
          }
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["降水量"],
          left: "center",
          top: 60,
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          boundaryGap: true,
          data: ["1月", "3月", "5月", "7月", "9月", "11月"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "降水量",
            // left: "50%",
            // top: "50%",
            type: "bar",
            data: [41, 60, 43, 46, 70, 50],
            smooth: true,
          }
        ],
      },
    };
  },
};
</script>

<style scoped>
.content {
  width: 30%;
}
.body {
  margin-top: 10px;
}

</style>
